<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script src="https://unpkg.com/vue@3.4.32/dist/vue.global.js"></script>
</head>
<body>

<div id="app">
    <p>{{arr}}</p>
    <!--  city in arr  遍历数组  city 就是arr中的每一个元素 -->
    <p v-for="city in arr">
        {{city}}
    </p>

    <p v-for="stu in stus">
        {{stu.username}} :{{stu.age}} :{{stu.job}}
    </p>

    <!--
         table 是表格标签
              tr 行
              td 列
    -->
    <table border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>职位</td>
        </tr>

        <tr v-for="stu in stus">
            <td>{{stu.username}}</td>
            <td>{{stu.age}}</td>
            <td>{{stu.job}}</td>
        </tr>

    </table>


</div>
<script>
    const {createApp, ref} = Vue;
    const app = createApp({
        setup(){

            let arr = ref(
                [
                    "广州","东莞","深圳"
                ]
            )

            let stus = ref(
                [
                    {"username":"乔峰","age":"34","job":"帮主"},
                    {"username":"段正淳","age":"44","job":"王爷"},
                    {"username":"虚竹","age":"20","job":"和尚"}
                ]
            )


            return {
                 arr,stus
            };
        }
    })
    app.mount('#app')
</script>

</body>
</html>